import { Space, Table, Tag,Button } from 'antd';
import { Input } from 'antd';
import React from 'react';
import {useDispatch,useSelector} from "react-redux"
import * as action from "../../action"
import {useEffect,useState} from "react"
import Delmodel from '../../components/delmodel';
import Modalcss from "../../Style/style.module.css"
import {debounce} from "lodash"
import Addmodal from "../../components/Addmodal"
const Style = { // 以js的方式去书写css样式，就叫做css in js
    "width":"60px",
    "height":"30px"
    
}
const inputStyle = {
    "marginLeft":"30px",
    "marginRight":"30px"
}
const App = () => {
    let [ipt,setIpt] = useState("")
    let [ipt1,setIpt1] = useState("")
    let [isadd ,setIsadd] = useState("新增")
    let [addShow,setAddShow] = useState(false)
    let [delishow,setDelishow] =useState(false)
    let [delindex,setDelINDX] = useState(0)
    let [editItem,setEidtItem] = useState({})
    let [editIndex,setEditIndex] = useState(0)
    let [columns,setColumns] = useState([
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          render: (text) => <a>{text}</a>,
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: 'Action',
          key: 'action',
          render: (_, record,index) => (
            <Space size="middle">
              <a onClick={()=>edifn(record,index)}>edit</a>
              <a onClick={()=>{delfn(index)}}>Delete</a>
            </Space>
          ),
        },
      ])
    let dispatch = useDispatch()
    let store = useSelector((state)=>{
        return {
            ...state.tablereducer
        }
    })
    let edifn = (item,index)=>{
        console.log(item,index);
        setAddShow(true)
        setEditIndex(index)
        setEidtItem(item)
        setIsadd("编辑")
        

    }
    let delfn = (index)=>{
            setDelINDX(index)
            setDelishow(true)
    }
    let closefn = (data)=>{
        setDelishow(data)
    }
    let searchfn = ()=>{
        console.log(ipt,ipt1);
        dispatch(action.searChfn(ipt,ipt1))
    }
    useEffect(()=>{
        dispatch(action.getlist())
    },[])
    let addfn = ()=>{
        setAddShow(true)
        setIsadd("新增")
    }
    let closeaddfn =(data)=>{
        setAddShow(data)
    }
    let resetfn = ()=>{  // 重置重新请求数据，并且将输入框的值清空
        dispatch(action.getlist())
        setIpt("")
        setIpt1("")
    }
   return (
    <>
    <div className='my-header'>
        <div>
         <Button onClick={addfn}>新增</Button>
        </div> 
        <div className='myheaderson'><Input placeholder="请输入姓名" value={ipt} onChange={(e)=>setIpt(e.target.value)}/><Input placeholder="请输入年龄" value={ipt1} onChange={(e)=>setIpt1(e.target.value)} style={inputStyle}/><Button onClick={searchfn}>搜索</Button><Button onClick={resetfn}>重置</Button></div>
    </div> 
    <Table columns={columns} dataSource={store.arr} style={{marginTop:"30px"}} />
    <Delmodel delishow={delishow} closefn = {closefn} delindex={delindex} ></Delmodel>
     <Addmodal addShow={addShow} closeaddfn ={closeaddfn} editItem={editItem} editIndex={editIndex} isadd={isadd}></Addmodal>
  </>
   )
   

  

}
export default App;